<script>
  import { moment } from 'istrong-timeutil';
  import { get } from 'istrong-axiosmodel';
  import { orderBy } from 'lodash';
  import { vList } from 'istrong-mvue-common-ui';

  import renderChart from '../../libs/chart/waterChart';

  export default {
    name: 'waterChart',
    data() {
      return {
        id: '',
        name: '',
        address: '',
        beginTime: moment(),
        endTime: moment(),
        chartData: { data: [] },
        listData: [],
        listField: [
          {
            fieldLabel: '时间',
            fieldName: 'time',
            fieldType: 'Date',
            format: 'MM-DD HH时',
            headerClass: 'chartViewer-WaterList-Header-Time',
            contentClass: 'chartViewer-WaterList-Content-Time'
          },
          {
            fieldLabel: '水位<span class="listViewer-header-unit">(m)</span>',
            fieldName: 'val',
            fieldType: 'Number',
            fixed: 2,
            headerClass: 'chartViewer-WaterList-Header-Val',
            contentClass: 'chartViewer-WaterList-Content-Val'
          },
          {
            fieldLabel: '库容<span class="listViewer-header-unit">(百万m³)</span>',
            fieldName: 'w_val',
            fieldType: 'Number',
            fixed: 1,
            headerClass: 'chartViewer-WaterList-Header-KL',
            contentClass: 'chartViewer-WaterList-Content-KL'
          }
        ]
      }
    },
    components: {
      'vc-List': vList
    },
    methods: {
      getChartData() {
        get('water.details', {
          waterDetails: {
            _id: this.id,
            time: ['[', moment(this.beginTime).format('YYYY-MM-DDTHH:mm:00'), ',', moment(this.endTime).format('YYYY-MM-DDTHH:mm:00'), ']'].join('')
          }
        }).then(result => {
          result = result.data || result;
          let data = result.length > 0 ? result[0] : {
            data: []
          };
          this.listData = orderBy(data.data, ['time'], ['desc']);
          console.log(this.listData)
          this.chartData = data;

          this.redrawChart();
        });
      },
      redrawChart() {
        renderChart(this._chart, 'chartViewer-WaterChart', this.chartData, this.beginTime, this.endTime)
      },
      routerToMap() {
        this.$router.push({
          name: 'water/main',
          params: {
            id: this.id,
            showType: 'map'
          }
        });
      }
    },
    computed: {
      header_BeginTime: function () {
        return moment(this.beginTime).format('DD日HH时mm分');
      },
      header_EndTime: function () {
        return moment(this.endTime).format('DD日HH时mm分');
      },
      currentVal: function () {
        let data = this.chartData.data;
        return data.length === 0 ? '' : data[data.length - 1].val.toFixed(2)
      },
      newestDataTime: function () {
        let data = this.chartData.data;
        return data.length === 0 ? '' :
          moment(data[data.length - 1].time).format('YYYY-MM-DD HH时');
      }
    },
    mounted() {
    },
    created() {
    },
    beforeRouteEnter(to, from, next) {
      let { id, name, beginTime, endTime } = to.query;
      next(vm => {
        // 通过 `vm` 访问组件实例
        vm.id = id;
        vm.name = name;
        vm.beginTime = beginTime;
        vm.endTime = endTime;
        vm.getChartData();
      });
    }
  }
</script>
<template>
  <div id="chartViewer">
    <div class="appHeader-listViewer">
      <div class="appHeader-listViewer-Time">{{header_BeginTime}} 至 {{header_EndTime}}</div>
      <div class="btChangeRouterMap" @click="routerToMap">
        <span class="ion-ios-location"></span>
      </div>
    </div>
    <div class="div-waterchart-hr"></div>
    <div class="chartViewer-WaterChart-Page">
      <div class="chartViewer-Chart">
        <div class="chartViewer-Chart-Name">{{name}}</div>
        <div class="chartViewer-Chart-Legend">
          <div>
            <div class="legend-hr">
              <hr color="#5399d7">
            </div>
            <div class="legend_text">正常水位</div>
          </div>
          <div>
            <div class="legend-hr">
              <hr color="#ed9f4c">
            </div>
            <div class="legend_text">警戒水位</div>
          </div>
          <div>
            <div class="legend-hr">
              <hr color="#fc575b">
            </div>
            <div class="legend_text">保证水位</div>
          </div>
        </div>
        <div id="chartViewer-WaterChart"></div>
        <div class="chartViewer-ChartTip">
          <div>
            <div class="chartViewer-ChartTip-Left">
              <span>警戒水位:</span>
              <span>{{chartData.warn_val || '　'}}</span>
            </div>
            <div class="chartViewer-ChartTip-Right">
              <span>保证水位:</span><span>{{chartData.ensure_val || '　'}}</span>
            </div>
          </div>
          <div>
            <div class="chartViewer-ChartTip-Left">
              <span>当前水位:</span>
              <span>{{currentVal || '　'}}</span>
            </div>
            <div class="chartViewer-ChartTip-Right">
              <span>时　　间:</span><span>{{newestDataTime}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="div-waterchart-hr"></div>
      <div class="chartViewer-WaterList">
        <vc-List :data="listData" :fields="listField" class="chartViewer-List"></vc-List>
      </div>
    </div>
  </div>
</template>
<style>
.div-waterchart-hr{
  height: 15px;
  width: 100%;
  background-color:  #EEEDF1;
}
.chartViewer-WaterChart-Page{
  position: absolute;
  top: 55px;
  width: 100%;
  bottom: 2px;
  overflow-y: scroll;
}
.chartViewer-WaterChart-Page>div{
  float: left;
}
#chartViewer-WaterChart{
  width: 100%;
  height: 210px;
  background-color: #fff;
}
.chartViewer-WaterList{
  width: 100%;
  font-size: 14px;
}
.chartViewer-WaterList-Header-Time,.chartViewer-WaterList-Content-Time{
  text-align: left;
  width: 43%;
}
.chartViewer-WaterList-Header-KL,.chartViewer-WaterList-Content-KL{
  min-width: 85px;
  width: 30%;
  text-align: right;
}
.chartViewer-WaterList-Header-Val,.chartViewer-WaterList-Content-Val{
  text-align: right;
  min-width: 80px;
  width: 24%;
  padding-right: 12px;
}
</style>